<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>nutshelljs Example - Stack Demo</title>
  </head>
  <body>
    <h3>Stack Demo</h3>
    <p>This example is showcasing:</p>
    <ul>
      <li>Stack Transition (New!)</li>
      <li>Starts on Slide 2 of 4</li>
      <li>Use of Background Images on slide</li>
      <li>Loop Mode ON</li>
      <li>Auto Start ON</li>
      <li>2.5 Second Delay</li>
    </ul>

    <!-- Start Demo -->
    
    <div id="slideshow5" style="background: #666; border: 1px solid black;">
      <div id="slider5" style="position: absolute; top: 0; left: 0">
        <div class="slidePanel5" style="background: url(images/fire.jpg) center center; font-size: 28px; color: white;">1</div>
        <div class="slidePanel5" style="background: url(images/island.jpg) center -70px; font-size: 28px; color: white;">2</div>
        <div class="slidePanel5" style="background: url(images/rain.jpg) center -120px; font-size: 28px; color: white;">3</div>
        <div class="slidePanel5" style="background: url(images/wind.jpg) center -100px; font-size: 28px; color: white;">4</div>
      </div>
    </div>
    <script type="text/javascript">
      var stackDemo  = new nutShell.blockslide({slideWidth: 502, slideHeight: 200, vertical: false, currentSlide: 1,
                                          containerEL: 'slideshow5', sliderEL: 'slider5', mode: 'stack',
                                          slidePanelClass: 'slidePanel5', loop: true, autoStart: true, slideDelay: 2500});
    </script>

    <!-- End Demo -->

    <br/><br/>
    <strong>javascript:</strong><br />
    <textarea cols="60" rows="5" style="width: 100%">
&lt;script type="text/javascript"&gt;
  var stackDemo  = new nutShell.blockslide({slideWidth: 502, slideHeight: 200, vertical: false, currentSlide: 1,
                                      containerEL: 'slideshow5', sliderEL: 'slider5', mode: 'stack',
                                      loop: true, autoStart: true, slideDelay: 2500});
&lt;/script&gt;
    </textarea>
  </body>
</html>